<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-27 14:16:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div class="watchquestions">
    <h2 style="line-height:50px">查看试题</h2>
    <card>
      <!--考试类型-->
      <Row>
        <Col span="2" align="right">
          课程类型:
          <Checkbox
            :indeterminate="indeterminate"
            :v-model="checkAll"
            @click.prevent.native="handleCheckAll"
            size="small"
            border
          >全选</Checkbox>
        </Col>
        <Col span="22">
          <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
            <Checkbox
              :label="item.subject_id"
              border
              size="small"
              v-for="item in examType"
              :key="item.subject_id"
            >{{item.subject_text}}</Checkbox>
          </CheckboxGroup>
        </Col>
      </Row>
      <!--选择类型-->
      <Row>
        <Col span="15">
          <Row>
            <Form :label-width="80">
              <Col span="12">
                <FormItem label="考试类型:">
                  <Select v-model="exam_id">
                    <Option
                      v-for="(item) in AllExamTypes"
                      :key="item.exam_id"
                      :value="item.exam_id"
                    >{{item.exam_name}}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label=" 题目类型:">
                  <Select v-model="questions_type_id">
                    <Option
                      v-for="(item) in QuestionsTypes"
                      :key="item.questions_type_id"
                      :value="item.questions_type_id"
                    >{{item.questions_type_text}}</Option>
                  </Select>
                </FormItem>
              </Col>
            </Form>
          </Row>
        </Col>
        <Col span="9" style="position:relative;bottom:-30px" align="left">
          <Button type="primary" @click="searchValue">
            <Icon type="ios-search-outline" />查询
          </Button>
        </Col>
      </Row>
    </card>
    <!--考试试题-->
    <card>
      <Row
        class="threeRow"
        v-for="(item) in examList"
        :key="item.questions_id"
        style="border-bottom:1px solid #ccc"
      >
        <Row>
          <div @click="routeGoDetail(item)">{{item.title}}</div>
        </Row>
        <Row>
          <Col span="7">
            <Tag type="border" color="primary" size="large">{{item.exam_name}}</Tag>
            <Tag type="border" color="error">{{item.questions_type_text}}</Tag>
            <Tag type="border" color="success">{{item.subject_text}}</Tag>
          </Col>
          <Col span="17" align="right" style="color:blue">
            <span @click="edit(item)" class="editSpan">编辑</span>
          </Col>
        </Row>
        <Row style="color:blue">发布人:{{item.user_name}}</Row>
      </Row>
    </card>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      // 设置 indeterminate 状态，只负责样式控制
      indeterminate: true,
      // 全选的开关
      checkAll: true,
      // 选中项id
      checkAllGroup: [],
      // 传后台的参数
      questions_id: '',
      questions_type_id: '',
      subject_id: '',
      exam_id: ''
    }
  },
  created() {
    this.getExamType()
    this.getExamList()
    this.QuestionsType()
    this.AllExamType()
  },
  computed: {
    ...mapState('ViewQuestions', [
      'examType',
      'examList',
      'QuestionsTypes',
      'AllExamTypes'
    ])
  },
  methods: {
    ...mapActions('ViewQuestions', [
      'getExamType',
      'getExamList',
      'QuestionsType',
      'AllExamType',
      'SearchValue',
      'EditExams'
    ]),
    // 点击全选   状态改变
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      console.log(this.indeterminate)
    },
    // 点击添加到数组中
    checkAllGroupChange(data) {
      // console.log(data)
    },
    // 点击查询
    searchValue() {
      this.SearchValue({
        exam_id: this.exam_id,
        questions_type_id: this.questions_type_id,
        subject_id: this.checkAllGroup[0]
      })
    },
    // 编辑  跳转页面
    edit(data) {
      // this.EditExams(this.questions_id)
      // console.log(data)
      this.questions_id = data.exam_id
      const obj = {}
      obj.title = data.title
      obj.questions_stem = data.questions_stem
      obj.questions_answer = data.questions_answer
      obj.subject_id = this.subject_id
      obj.questions_type_id = this.questions_type_id
      obj.exam_id = this.exam_id
      obj.questions_id = this.questions_id
      this.$router.push({
        path: `/home/testManage/editQuestion/${this.questions_id}`,
        query: obj
      })
    },
    routeGoDetail(data) {
      console.log(data)
      this.$router.push({
        path: `/home/testManage/questions/detail/${data.questions_id}`,
        query: data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.watchquestions {
  span {
    font-size: 12px;
    color: blue;
    // disp
  }

  .editSpan {
    cursor: pointer;
  }

  .editSpan:hover {
    color: orangered;
  }
}
</style>
